<div class="layui-fluid" id="VIEW-customer" lay-title="员工管理">

    <!-- 新增客户 -->
    <div class="layui-card" id="staff_add" style="display: none">
            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form" action="" id="form_staff_add " lay-filter="staff_add">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="xing">*</span>员工姓名:</label>
                            <div class="layui-input-inline">
                                <input type="text"  name="staffName" placeholder="员工姓名" onkeyup="this.value=this.value.replace(/\s+/g,'')" lay-verify="required" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="xing">*</span>员工性别:</label>
                            <div class="layui-input-inline">
                                <div class="layui-col-md6" style="width: 100%">
                                    <select name="staffSexy" >
                                        <option value="">-请选择-</option>
                                        <option value="0">女</option>
                                        <option value="1">男</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">身份证号:</label>
                            <div class="layui-input-inline">
                                <input type="text"  name="staffIdCard" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="身份证号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="xing">*</span>所属部门:</label>
                            <div class="layui-input-inline">
                                <ul id="departmentTree" name="departmentTree" class="dtree" data-id="0"></ul>
                                <input type="hidden" id="departmentId" name="departmentId"/>
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">联系电话:</label>
                            <div class="layui-input-inline">
                                <input type="text"  name="staffPhone" placeholder="联系电话" onkeyup="this.value=this.value.replace(/\s+/g,'')" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="xing">*</span>工资:</label>
                            <div class="layui-input-inline">
                                <input type="text"  name="salary" placeholder="工资" onkeyup="!/^(\d+\.?)?\d{0,2}$/.test(this.value)?(this.value=this.value.substring(0, this.value.length-1)): ''" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="xing">*</span>银行卡号:</label>
                            <div class="layui-input-inline">
                                <input type="text"  name="bankNo" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="银行卡号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="xing">*</span>开户银行:</label>
                            <div class="layui-input-inline">
                                <select name="bank" id="bank" lay-verify="required" lay-filter="bankFilter">
                                    <option value="">-请选择-</option>
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="xing">*</span>入职时间:</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="joinTimeString" name="joinTimeString" >
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">备&nbsp;&nbsp;&nbsp;&nbsp;注:</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="comment" name="comment" >
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="form-staff-submit">保存</button>
                            <button type="reset" id="reset_add" class="layui-btn layui-btn-primary">清除</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    <!-- 修改客户 -->
    <div class="layui-card" id="staff_edit" style="display: none">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" id="form_staff_edit " lay-filter="staff_edit">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>员工姓名:</label>
                        <div class="layui-input-inline">
                            <input type="hidden" id="hidId" name="hidId">
                            <input type="text" id="staffName_edit" name="staffName_edit" placeholder="员工姓名" onkeyup="this.value=this.value.replace(/\s+/g,'')" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>员工性别:</label>
                        <div class="layui-input-inline">
                            <div class="layui-col-md6" style="width: 100%">
                                <select name="staffSexy_edit" id="staffSexy_edit">
                                    <option value="">-请选择-</option>
                                    <option value="0">女</option>
                                    <option value="1">男</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">身份证号:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="staffIdCard_edit"  name="staffIdCard_edit" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="身份证号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>所属部门:</label>
                        <div class="layui-input-inline">
                            <ul id="departmentTree_edit" name="departmentTree" class="dtree" data-id="0"></ul>
                            <input type="hidden" id="departmentId_edit" name="departmentId_edit"/>
                        </div>
                    </div>

                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">联系电话:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="staffPhone_edit"  name="staffPhone_edit" placeholder="联系电话" onkeyup="this.value=this.value.replace(/\s+/g,'')" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>工资:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="salary_edit" name="salary_edit" placeholder="工资" onkeyup="!/^(\d+\.?)?\d{0,2}$/.test(this.value)?(this.value=this.value.substring(0, this.value.length-1)): ''" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>银行卡号:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="bankNo_edit" name="bankNo_edit" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="银行卡号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>开户银行:</label>
                        <div class="layui-input-inline">
                            <select name="bank_edit" id="bank_edit" lay-verify="required" lay-filter="bankFilter">
                                <option value="">-请选择-</option>
                            </select>
                        </div>
                    </div>

                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>入职时间:</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="joinTimeString_edit" name="joinTimeString_edit" >
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">备&nbsp;&nbsp;&nbsp;&nbsp;注:</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="comment_edit" name="comment_edit" >
                        </div>
                    </div>

                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="form-staff-edit">保存</button>
                        <button type="reset" id="reset_edit" class="layui-btn layui-btn-primary">清除</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 修改客户 -->
    <div class="layui-card" id="staff_del" style="display: none">
        <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="" id="form_staff_del " lay-filter="staff_del">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><span class="xing">*</span>离职时间:</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="outTimeString_del" name="outTimeString_del" >
                            <input type="hidden" class="layui-input" id="hidDelId" name="hidDelId">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="form-staff-del">确认</button>
                        <button type="reset" id="reset_del" class="layui-btn layui-btn-primary">清除</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 表头条件搜索 -->
    <div class="layui-card">
        <div class="layui-card-header">
            <i class="layui-icon layui-icon-cluster"></i>&nbsp;员工管理
        </div>
        <div class="layui-row">
            <div class="layui-card-body">
                <div class="layui-form" id="customerReload">
                    <div class="layui-input-inline" style="width:130px">
                        <input type="text" name="staffId_sel" id="staffId_sel" onkeyup="this.value=this.value.replace(/\s+/g,'')"
                               placeholder="员工编号" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:130px">
                        <input type="text" name="staffName_sel" id="staffName_sel" onkeyup="this.value=this.value.replace(/\s+/g,'')"
                               placeholder="员工姓名" autocomplete="off" class="layui-input">
                    </div>
                    开户银行:
                    <div class="layui-input-inline" style="width:130px">
                        <select name="bank" id="bank_sel" lay-filter="bankFilter">
                            <option value="">-请选择-</option>
                        </select>
                    </div>

                    所属部门:
                    <div class="layui-input-inline" style="width:250px">
                        <ul id="departmentTree_sel" name="departmentTree_sel"  class="dtree" data-id="0"></ul>
                        <input type="hidden" id="departmentId_sel" name="departmentId_sel"/>
                    </div>


                    <button id="search" class="layui-btn" style="margin-left: 20px;" lay-submit
                            lay-filter="provinceSearch" data-type="reload">
                        <i class="layui-icon">&#xe615;</i>搜索
                    </button>
                </div>

                <table id="staff-table" class="layui-hide" lay-filter="staff-table"></table>
            </div>
        </div>
    </div>

    <script type="text/html" id="staffTool_bar">
        <button class="layui-btn layui-btn-sm" style="background-color: #00d57b;font-size:14px;" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="edit">信息修改</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm " lay-event="del">员工离职</button>
    </script>

</div>
<script>
    layui.use(['admin', 'table', 'form', 'dropdown', 'jquery','laydate','dtree','selectM'],
        function (admin, table, form, dropdown, $) {
        var view = $('#VIEW-list-table');
        var laydate = layui.laydate,
            form = layui.form,
            admin = layui.admin,
            selectM=layui.selectM,
            dtree = layui.dtree,
            index,
            departmentTree;

        form.render();

        //渲染数据字典下拉 {事项类型  资金渠道   账户类型}
        admin.get({
            api: "getDictValue",
            data:{
                "dictCode" : "bank",
            },
            //请求成功
            success:function(res){
                $.each(res.data, function (index, item) {
                    $('#bank').append(new Option(item.key, item.value));// 下拉菜单里添加元素
                    $('#bank_edit').append(new Option(item.key, item.value));// 下拉菜单里添加元素
                    $('#bank_sel').append(new Option(item.key, item.value));// 下拉菜单里添加元素
                });
                //重新渲染 固定写法
                layui.form.render("select");
            }
        });

        dtree.renderSelect({
            elem: "#departmentTree",
            url: "api/v1/ucenter/sys-department/getDepartmentTree",
            selectValue: "", // 你可以在这里指定默认值
            skin: "layui",
            initLevel: "20", //默认为2
            line: true,
            dataFormat: "list"  //配置data的风格为list
        });
        // 绑定节点点击
        dtree.on("node('departmentTree')" ,function(obj){
            $("#departmentId").val(obj.param.nodeId);
        });


        dtree.renderSelect({
            elem: "#departmentTree_sel",
            url: "api/v1/ucenter/sys-department/getDepartmentTree",
            selectValue: "", // 你可以在这里指定默认值
            skin: "layui",
            initLevel: "20", //默认为2
            line: true,
            dataFormat: "list"  //配置data的风格为list
        });
        // 绑定节点点击
        dtree.on("node('departmentTree_sel')" ,function(obj){
            $("#departmentId_sel").val(obj.param.nodeId);
        });


        /* 监听离职提交 */
        form.on('submit(form-staff-edit)', function (data) {
            admin.post({
                api: "delStaff",
                data:{
                    outTimeString: data.field.outTimeString_del,
                    staffId: data.field.hidDelId,
                },
                //请求成功
                success: function (res) {
                    layer.msg(res.data);
                    table.reload('staff-table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            });
        });

        /* 监听修改提交 */
        form.on('submit(form-staff-edit)', function (data) {
            admin.put({
                api: "editStaff",
                data:{
                    "staffName" : data.field.staffName_edit,
                    "staffSexy" : data.field.staffSexy_edit,
                    "staffId" : data.field.hidId,
                    "joinTimeString": data.field.joinTimeString_edit,
                    "staffIdCard" : data.field.staffIdCard_edit,
                    "staffPhone" : data.field.staffPhone_edit,
                    "departmentId" : data.field.departmentId_edit,
                    "comment" : data.field.comment_edit,
                    "bankNo":data.field.bankNo_edit,
                    "bank":data.field.bank_edit,
                    "salary":data.field.salary_edit

                },
                //请求成功
                success:function(res){
                    layer.close(index);
                    layer.msg(res.data);
                    table.reload('staff-table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            });
            return false;
        });

        /* 监听提交 */
        form.on('submit(form-staff-submit)', function (data) {

            if(data.field.departmentTree_select_input==""){
                layer.msg("请选择部门！");
                return false;
            }
            admin.post({
                api: "addStaff",
                data:data.field,
                //请求成功
                success:function(res){
                    layui.form.render();
                    layer.close(index);
                    $("#reset_add").click();
                    layer.msg(res.data);
                    table.reload('staff-table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            });
            return false;
        });

        table.render({
            elem: '#staff-table'
            ,height: 'full-165'
            ,api: 'getAllStaff' //数据接口
            ,title: '员工查询'
            ,page: true //开启分页
            ,even: true //开启隔行背景
            ,toolbar:'#staffTool_bar'
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }

            ,cols: [[ //表头
                { title: '', type: 'checkbox', fixed: true, width: 60 },
                { title: '部门编号',field: 'departmentId',width: 0 ,hide: true},
                { title: '开户行编码',field: 'bank',width: 0 ,hide: true},
                { title: '员工编号',field: 'staffId',width: 100 },
                { title: '姓名', field: 'staffName', width: 100},
                { title: '性别', field: 'staffSexy', width: 80,templet: function(d){
                        if(d.staffSexy){
                            return "男";
                        }else{
                            return "女";
                        }
                    }},
                { title: '开户银行',field: 'bankName',width: 150 },
                { title: '银行卡号',field: 'bankNo',width: 180 },
                { title: '工资', field: 'salary', width: 100},
                { title: '联系电话', field: 'staffPhone', width: 140 },
                { title: '身份证号', field: 'staffIdCard', width: 180},
                { title: '所属部门', field: 'departmentName', width: 100},
                { title: '入职时间',field: 'joinTime', width: 150 ,templet: function(d){
                        return (d.joinTime).replace("T"," ");
                    },},
                { title: '员工状态',field: 'staffState',width: 80,templet: function(d){
                        if(d.staffState){
                            return "在职";
                        }else{
                            return "离职";
                        }
                    } },

                { title: '离职时间', field: 'outTime', width: 150 ,templet: function(d){
                    if(d.outTime!=null){
                        return (d.outTime).replace("T"," ");
                    }else{
                        return "";
                    }
                    },},
                { title: '创建人',field: 'createName', width: 150 },
                { title: '修改人', field: 'updateName', width: 150 },


                { title: '备注', field: 'memo', minWidth: 120}
            ]]
            ,done:function(res,curr,count){
                // 隐藏列
                $(".layui-table-box").find("[data-field='departmentId']").css("display","none");
                $(".layui-table-box").find("[data-field='bank']").css("display","none");
            }
        });

        var $ = layui.$, active = {
            reload: function(){

                //执行重载
                table.reload('staff-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        staffId: $('#staffId_sel').val(),
                        staffName: $('#staffName_sel').val(),
                        departmentId: $('#departmentId_sel').val(),
                        bank: $('#bank_sel').val(),
                    }
                }, 'data');
            }
        };
        $('#search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //头工具栏事件
        table.on('toolbar(staff-table)', function(obj){
            //新增员工
            if(obj.event === 'add'){
                index = layer.open({
                    type: 1
                    ,anim: 5
                    ,shade: 0
                    ,maxmin: false
                    ,area:['750px','480px']
                    ,title:'新增员工'
                    ,content: $('#staff_add')
                });
            }
            //编辑员工资料
            if(obj.event === 'edit'){
                var checkStatus = table.checkStatus(obj.config.id);
                var rows = checkStatus.data.length;
                if(rows != 1){
                    layer.msg("必须且只能选择一条数据！");
                    return false;
                }
                var data = checkStatus.data[0];
                var tips="";
                if(departmentTree == undefined){
                    //加载树
                    departmentTree = dtree.renderSelect({
                        elem: "#departmentTree_edit",
                        url: "api/v1/ucenter/sys-department/getDepartmentTree",
                        skin: "layui",
                        initLevel: "20", //默认为2
                        line: true,
                        dataFormat: "list",  //配置data的风格为list
                        done: function(res, first){
                            if(first) {
                                dtree.click(departmentTree, data.areaId);
                                $("div[dtree-click='itemNodeClick'][dtree-id='departmentTree_edit'][data-id='"+data.departmentId+"']").click();
                            }
                        }
                    });
                }
                else {
                    dtree.click(departmentTree, data.areaId);
                    $("div[dtree-click='itemNodeClick'][dtree-id='departmentTree_edit'][data-id='"+data.departmentId+"']").click();
                }
                // 绑定节点点击
                dtree.on("node('departmentTree_edit')" ,function(obj){
                    $("#departmentId_edit").val(obj.param.nodeId);

                });
                index = layer.open({
                    type: 1
                    ,anim: 5
                    ,shade: 0
                    ,maxmin: false
                    ,area:['750px','480px']
                    ,title:'修改员工资料'
                    ,content: $('#staff_edit')
                });
                $("#hidId").val(data.staffId);

                $("#staffName_edit").val(data.staffName);
                $("#staffPhone_edit").val(data.staffPhone);
                $("#staffIdCard_edit").val(data.staffIdCard);
                $("#comment_edit").val(data.comment);
                $("#salary_edit").val(data.salary);
                $("#joinTimeString_edit").val(data.joinTime);

                var select = 'dd[lay-value=' + data.staffSexy + ']';
                $('#staffSexy_edit').siblings("div.layui-form-select").find('dl').find(select).click();

                $("#bankNo_edit").val(data.bankNo);
                var select = 'dd[lay-value=' + data.bank + ']';
                $('#bank_edit').siblings("div.layui-form-select").find('dl').find(select).click();


            }
            if(obj.event === 'del'){
                var checkStatus = table.checkStatus(obj.config.id);
                var rows = checkStatus.data.length;
                if(rows != 1){
                    layer.msg("必须且只能选择一条数据！");
                    return false;
                }
                var data = checkStatus.data[0];
                index = layer.open({
                    type: 1
                    ,anim: 5
                    ,shade: 0
                    ,maxmin: false
                    ,area:['400px','180px']
                    ,title: '确认员工: '+data.staffName+' 离职'
                    ,content: $('#staff_del')
                });
                $("#hidDelId").val(data.staffId);
            }
        });
            //日期时间选择器
            laydate.render({
                elem: '#joinTimeString'
                ,type: 'datetime'
            });
            //日期时间选择器
            laydate.render({
                elem: '#joinTimeString_edit'
                ,type: 'datetime'
            });
            //日期时间选择器
            laydate.render({
                elem: '#outTimeString_del'
                ,type: 'datetime'
            });

    })
</script>